<template>
    <div class="ItemEvent">
        表单元素 :
        <a-select class="selectView" size="small" v-model:value="Event.FormKey" @change="FormKeyChange">
            <a-select-option v-for="key in keyArray" :key="key" :value="key">{{ key }}</a-select-option>
        </a-select>
        <a-select class="selectView" size="small" v-if="Event.FormKey" v-model:value="Event.FunKey" @change="BasicChange">
            <a-select-option v-for="Basic in BasicArray" :value="Basic.value">{{ Basic.name }}</a-select-option>
        </a-select>
        <a-select class="selectView" size="small" v-if="Event.FunKey && EventArray.length" v-model:value="Event.EventKey" @change="EventChange">
            <a-select-option v-for="Event in EventArray" :value="Event.key">{{ Event.name }}</a-select-option>
        </a-select>
        <a-popconfirm title="是否删除？" @confirm="emit('DeleteItem')">
            <span class="Delete">
                <delete-outlined />
            </span>
        </a-popconfirm>
        <div v-if="Event.FunKey == 'Rules'">
            <Rules />
        </div>
        <Code :Event="Event" v-else-if="EventArray === true || (Event.EventKey && EventArray.length)" />
    </div>

</template>
<script setup>
import { computed, ref, reactive, watch } from "vue";
import Code from "./Code.vue";
import Rules from "./Rules.vue";
import { DeleteOutlined } from "@ant-design/icons-vue";



const props = defineProps(["Event", "keyArray", "index"]);
const emit = defineEmits(["DeleteItem"]);

const StatusArray = reactive([
    { name: "启用状态", key: "Enable" },
    { name: "显示状态", key: "Show" },
    { name: "只读状态", key: "Readonly" },
    { name: "必填状态", key: "Required" },
]);

const FormOptionArray = reactive([
    { name: "标签文本", key: "label" },
    { name: "标签布局", key: "labelCol" },
    { name: "控件布局", key: "wrapperCol" },
    { name: "额外的提示信息", key: "extra" },
    { name: "冒号", key: "colon" },
    { name: "提示信息", key: "help" },
    { name: "标签文本对齐方式", key: "labelAlign" },
]);

const EventArray = computed(() => {
    if (props.Event.FunKey == "Status") {
        return StatusArray;
    } else if (props.Event.FunKey == "FormOptions") {
        return FormOptionArray;
    } else if (props.Event.FunKey) {
        return true;
    } else {
        return null;
    }
});

watch(
    EventArray,
    (val) => {
        console.log(val);
    },
    { deep: true }
);

const BasicArray = reactive([
    { name: "状态", value: "Status" },
    { name: "表单属性", value: "FormOptions" },
    { name: "元素属性", value: "ElementOptions" },
    { name: "校验规则", value: "Rules" },
    { name: "默认值", value: "Default" },
    { name: "表单值", value: "Value" },
]);

const FormKeyChange = () => {
    props.Event.FunKey = "";
    props.Event.EventKey = "";
    props.Event.ValueType = "direct";
    props.Event.Value = "";
};
const BasicChange = () => {
    props.Event.EventKey = "";
    props.Event.ValueType = "direct";
    props.Event.Value = "";
};

const EventChange = () => {
    props.Event.ValueType = "direct";
    props.Event.Value = "";
};


</script>
<style lang="less" scoped>
.Delete {
    padding: 0 8px;
    cursor: pointer;
}
.ItemEvent {
    padding: 16px 0 0 20px;
}
.selectView {
    width: 120px;
}
.TextareaView {
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
}
.TextView {
    padding: 0 4px;
}
.Event {
    width: 100%;
}
</style>
